<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          昵&emsp;&emsp;称：
          <el-input style="width:200px" v-model="nickName" placeholder="请输入昵称"></el-input>
          <br />注册日期：
          <el-date-picker type="date" placeholder="请输入注册日期" v-model="dateReg" style="width: 200px;"></el-date-picker>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          账&emsp;&emsp;号：
          <el-input style="width:200px" v-model="zhanghao" placeholder="请输入账号"></el-input>
          <br />状&emsp;&emsp;态：
          <el-select style="width:200px" v-model="zhuangtai" placeholder="请选择">
            <el-option label="正常" value="shanghai"></el-option>
            <el-option label="冻结" value="beijing"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          性&emsp;&emsp;别：
          <el-select style="width:200px" v-model="xingbie" placeholder="请选择">
            <el-option label="男" value="shanghai"></el-option>
            <el-option label="女" value="beijing"></el-option>
          </el-select>
          <br />会&emsp;&emsp;员：
          <el-select style="width:200px" v-model="huiyuan" placeholder="请选择">
            <el-option label="一年" value="shanghai"></el-option>
            <el-option label="永久" value="beijing"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-button class="searchBtn" type="primary">立即查询</el-button>
    <el-button @click="reWrite">重置</el-button>

    <!-- 分割线 -->
    <el-divider content-position="center">
      <span style="color:#999;fontWeight:400">以下为搜索结果</span>
    </el-divider>
    <!-- 功能按钮 -->
    <span style="fontSize:14px;color:#666;float:left">共搜索到90条数据</span>
    <div style="float:right;marginBottom:14px">
      <el-button size="medium">赠优惠券</el-button>
      <el-button size="medium">设置标签</el-button>
      <el-button size="medium">群发站内信</el-button>
      <el-button size="medium">群发消息</el-button>
      <el-button size="medium">批量推送消息</el-button>
      <el-button size="medium">导出数据</el-button>
    </div>

    <!-- 这里是表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed type="selection" show-overflow-tooltip label="checkbox" width="36"></el-table-column>
      <el-table-column prop="userID" label="用户ID" width="150"></el-table-column>
      <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
      <el-table-column prop="account" label="账号" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="60"></el-table-column>
      <el-table-column prop="vip" label="会员" width="60"></el-table-column>
      <el-table-column prop="heartNum" label="心得数量" width="120"></el-table-column>
      <el-table-column prop="fullNum" label="订单总额" width="120"></el-table-column>
      <el-table-column prop="state" label="状态" width="80"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 这里是分页 -->
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      nickName: "",
      dateReg: "",
      zhanghao: "",
      zhuangtai: "",
      xingbie: "",
      huiyuan: "",
      tableData: [
        {
          userID: 1864654564,
          nickname: "YaaLee",
          account: 13161385356,
          gender: "男",
          vip: "是",
          heartNum: 1000,
          fullNum: 365,
          state: "正常",
        },
        {
          userID: 1864654564,
          nickname: "YaaLee",
          account: 13161385356,
          gender: "男",
          vip: "是",
          heartNum: 1000,
          fullNum: 365,
          state: "正常",
        },
        {
          userID: 1864654564,
          nickname: "YaaLee",
          account: 13161385356,
          gender: "男",
          vip: "是",
          heartNum: 1000,
          fullNum: 365,
          state: "正常",
        },
        {
          userID: 1864654564,
          nickname: "YaaLee",
          account: 13161385356,
          gender: "男",
          vip: "是",
          heartNum: 1000,
          fullNum: 365,
          state: "正常",
        },
        {
          userID: 1864654564,
          nickname: "YaaLee",
          account: 13161385356,
          gender: "男",
          vip: "是",
          heartNum: 1000,
          fullNum: 365,
          state: "正常",
        },
      ],
    };
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to);
    console.log(from);
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next()
  },
  methods: {
    reWrite() {
      this.nickName = "";
      this.dateReg = "";
      this.zhanghao = "";
      this.zhuangtai = "";
      this.xingbie = "";
      this.huiyuan = "";
    },
  },
};
</script>

<style scoped>
.el-input,
.el-select {
  margin-bottom: 14px;
}
.grid-content {
  font-size: 14px;
  color: #666;
}
.el-row {
  margin-bottom: 0px;
}
.el-table {
  margin-bottom: 14px;
}
.fenye {
  display: flex;
  justify-content: center;
}
</style>